<template>
	<view class="container">
		<!-- 顶部搜索栏 -->
		<view class="search-header">
			<view class="search-box">
				<u-icon name="arrow-left" size="22" color="#303133" @click="goBack"></u-icon>
				<view class="search-input-wrapper">
					<u-input 
						placeholder="搜索商家/品类/商圈" 
						v-model="searchValue" 
						border="none"
						placeholderStyle="color: #999"
						@change="onSearchChange"
						@confirm="onSearch"
						clearable
						:customStyle="{
							backgroundColor: '#f5f5f5',
							borderRadius: '20px',
							height: '36px',
							fontSize: '14px',
							padding: '0 10px'
						}"
						suffixIcon="search"
						suffixIconStyle="color: #999"
					></u-input>
				</view>
			</view>
		</view>

		<!-- 筛选条件栏 -->
		<view class="filter-bar">
			<view class="filter-item" :class="{ active: currentFilter === 'nearby' }" @click="setFilter('nearby')">
				<text>附近</text>
				<u-icon name="arrow-down" size="12" color="#666"></u-icon>
			</view>
			<view class="filter-item" :class="{ active: currentFilter === 'sort' }" @click="setFilter('sort')">
				<text>智能排序</text>
				<u-icon name="arrow-down" size="12" color="#666"></u-icon>
			</view>
			<!-- <view class="filter-item special" :class="{ active: currentFilter === 'coupon' }" @click="setFilter('coupon')">
				<text>神券商家</text>
			</view>
			<view class="filter-item" :class="{ active: currentFilter === 'group' }" @click="setFilter('group')">
				<text>特价团</text>
			</view> -->
		</view>

		<!-- KTV列表 -->
		<scroll-view class="ktv-list" scroll-y @scrolltolower="loadMore">
			<view v-for="(ktv, index) in ktvList" :key="index" class="ktv-item" @click="goToKTVDetail(ktv)">
				<!-- KTV图片 -->
				<view class="ktv-image-wrapper">
					<image class="ktv-image" :src="ktv.image" mode="aspectFill"></image>
					<view class="image-overlay" v-if="ktv.features && ktv.features.length > 0">
						<view v-for="feature in ktv.features" :key="feature" class="feature-tag">
							{{ feature }}
						</view>
					</view>
				</view>

				<!-- KTV信息 -->
				<view class="ktv-info">
					<view class="ktv-header">
						<text class="ktv-name">{{ ktv.name }}</text>
					</view>
					<view class="rating-row">
						<view class="rating-section">
							<view class="stars">
								<u-icon v-for="star in 5" :key="star" 
									:name="star <= ktv.rating ? 'star-fill' : 'star'" 
									:color="star <= ktv.rating ? '#ffa500' : '#ddd'" 
									size="14">
								</u-icon>
							</view>
							<text class="rating-text">{{ ktv.rating.toFixed(1) }}</text>
						</view>
					</view>
					<view class="price-booking-row">
						<text class="price-info">{{ ktv.priceInfo }}</text>
						<text class="booking-status">{{ ktv.bookingStatus }}</text>
					</view>

					<view class="ktv-details">
						<text class="location">{{ ktv.location }}</text>
						<text class="category">{{ ktv.category }}</text>
						<text class="distance">{{ ktv.distance }}</text>
					</view>

					<!-- 标签区域 -->
					<view class="tags-section" v-if="ktv.tags && ktv.tags.length > 0">
						<view v-for="tag in ktv.tags" :key="tag" class="tag" :class="tag.type">
							{{ tag.text }}
						</view>
						<text class="ranking" v-if="ktv.ranking">{{ ktv.ranking }}</text>
					</view>

					<!-- 优惠信息 -->
					<view class="promotion-section" v-if="ktv.promotions && ktv.promotions.length > 0">
						<view v-for="(promotion, pIndex) in ktv.promotions" :key="pIndex" class="promotion-item">
							<view class="promotion-badge" :class="promotion.type">{{ promotion.label }}</view>
							<text class="promotion-text">{{ promotion.text }}</text>
							<text class="promotion-price">{{ promotion.price }}</text>
							<text class="promotion-original" v-if="promotion.originalPrice">{{ promotion.originalPrice }}</text>
							<text class="promotion-desc" v-if="promotion.desc">{{ promotion.desc }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<view class="load-more" v-if="hasMore">
				<u-loading-icon :show="loading"></u-loading-icon>
				<text>{{ loading ? '加载中...' : '上拉加载更多' }}</text>
			</view>
			<view class="no-more" v-else>
				<text>没有更多数据了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchValue: '',
			currentFilter: '',
			loading: false,
			hasMore: true,
			ktvList: [
				{
					id: 1,
					name: '美豪汇 PARTY·KTV',
					image: '/static/temp/ktv1.jpg',
					rating: 4.0,
					priceInfo: '￥27/人',
					bookingStatus: '当前时间段可订',
					location: '济南西站',
					category: '量贩式KTV',
					distance: '1.6km',
					features: ['神券', '最高膨胀50'],
					tags: [
						{ text: '有小食', type: 'feature' },
						{ text: '生日礼遇', type: 'feature' },
						{ text: '可存酒', type: 'feature' }
					],
					ranking: '济南西站KTV好评榜第5名',
					promotions: [
						{
							type: 'special',
							label: '惠',
							text: '￥1262',
							price: '3.2折',
							originalPrice: '￥3968',
							desc: '【豪华畅饮】大包唱酒'
						},
						{
							type: 'lowest',
							label: '30天最低',
							text: '￥315',
							price: '4.1折',
							originalPrice: '￥780',
							desc: '【豪华包厢】黄金/凌晨档次'
						}
					]
				},
				{
					id: 2,
					name: '喜鹊·好声音KTV（红场店）',
					image: '/static/temp/ktv2.jpg',
					rating: 4.8,
					priceInfo: '￥27/人',
					bookingStatus: '当前时间段可订',
					location: '白马山/馆山立交桥',
					category: '量贩式KTV',
					distance: '4.1km',
					features: ['神券', '最高膨胀50', '人气好店', '高档音响'],
					tags: [],
					ranking: '市中区KTV好评榜第1名',
					promotions: [
						{
							type: 'group',
							label: '特价团',
							text: '￥147',
							price: '1.9折',
							originalPrice: '￥816',
							desc: '【黄金场】3小时欢唱+6瓶'
						},
						{
							type: 'order',
							label: '订',
							text: '￥88',
							price: '1.2折',
							desc: '精致小包 5小时 88元起，豪华中包 5小'
						},
						{
							type: 'festival',
							label: '暑期聚惠节',
							text: '￥20.8',
							price: '1.2折',
							originalPrice: '￥188',
							desc: '【阳光场·3H】12点-19点'
						}
					]
				},
				{
					id: 3,
					name: '星聚会KTV（高新万达店）',
					image: '/static/temp/ktv3.jpg',
					rating: 4.8,
					priceInfo: '￥61/人',
					bookingStatus: '当前时间段可订',
					location: '高新万达广场',
					category: '量贩式KTV',
					distance: '20.0km',
					features: ['神券', '最高膨胀50', '到店无需预备', '人气好店'],
					tags: [],
					ranking: '济南KTV人气榜第1名',
					promotions: [
						{
							type: 'group',
							label: '特价团',
							text: '￥88',
							price: '3.1折',
							originalPrice: '￥288',
							desc: '【享乐不打烊】星聚会白天档'
						},
						{
							type: 'festival',
							label: '暑期聚惠节',
							text: '￥78',
							price: '2.6折',
							originalPrice: '￥302',
							desc: '【工作日特惠】小包白天档 3'
						},
						{
							type: 'festival',
							label: '暑期聚惠节',
							text: '￥188',
							price: '6.3折',
							originalPrice: '￥300',
							desc: '【特惠】白威红瓶啤酒 10瓶'
						}
					]
				},
				{
					id: 4,
					name: '爱秀超K量贩KTV',
					image: '/static/temp/ktv4.jpg',
					rating: 4.2,
					priceInfo: '￥18/人',
					bookingStatus: '当前时间段可订',
					location: '济南西站',
					category: '量贩式KTV',
					distance: '<100m',
					features: ['神券', '最高膨胀50', '立案', '私密包间'],
					tags: [],
					ranking: '济南西站KTV销量榜第4名',
					promotions: [
						{
							type: 'group',
							label: '特价团',
							text: '￥88',
							price: '3.1折',
							originalPrice: '￥288',
							desc: '【享乐不打烊】星聚会白天档'
						},
						{
							type: 'festival',
							label: '暑期聚惠节',
							text: '￥78',
							price: '2.6折',
							originalPrice: '￥302',
							desc: '【工作日特惠】小包白天档 3'
						},
						{
							type: 'festival',
							label: '暑期聚惠节',
							text: '￥188',
							price: '6.3折',
							originalPrice: '￥300',
							desc: '【特惠】白威红瓶啤酒 10瓶'
						}
					]
				}
			]
		};
	},
	onLoad() {
		// 页面加载完成
	},
	onReachBottom() {
		this.loadMore();
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		onSearchChange(value) {
			console.log('搜索值变化:', value);
		},
		onSearch() {
			if (!this.searchValue.trim()) {
				uni.showToast({
					title: '请输入搜索内容',
					icon: 'none'
				});
				return;
			}
			uni.showToast({
				title: `搜索: ${this.searchValue}`,
				icon: 'none'
			});
		},
		setFilter(type) {
			if (this.currentFilter === type) {
				this.currentFilter = '';
			} else {
				this.currentFilter = type;
			}
			uni.showToast({
				title: `筛选: ${type}`,
				icon: 'none'
			});
		},
		goToKTVDetail(ktv) {
			uni.navigateTo({
				url: `/pages/ktv/ktvDetail?id=${ktv.id}&name=${encodeURIComponent(ktv.name)}`
			});
		},
		loadMore() {
			if (this.loading || !this.hasMore) return;
			
			this.loading = true;
			// 模拟加载更多数据
			setTimeout(() => {
				this.loading = false;
				// 这里可以添加更多数据或设置hasMore为false
				if (this.ktvList.length >= 10) {
					this.hasMore = false;
				}
			}, 1000);
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	background: #f5f5f5;
	min-height: 100vh;
}

// 顶部搜索栏
.search-header {
	background: #fff;
	padding: 10rpx 30rpx 20rpx;
	padding-top: calc(var(--status-bar-height) + 20rpx);
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
	position: sticky;
	top: 0;
	z-index: 999;

	.search-box {
		display: flex;
		align-items: center;
		height: 72rpx;

		.search-input-wrapper {
			flex: 1;
			margin-left: 20rpx;
		}
	}
}

// 筛选条件栏
.filter-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #f0f0f0;

	.filter-item {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 6rpx 24rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
		color: #333;
		border-radius: 20rpx;
		transition: all 0.3s;

		&.active {
			color: #fa436a;
			background: #fff2f0;
		}

		&.special {
			color: #fa436a;
			background: linear-gradient(90deg, #fff2f0 0%, #ffe8e8 100%);
		}

		&:last-child {
			margin-right: 0;
		}
	}
}

// KTV列表
.ktv-list {
	flex: 1;
	background: #f5f5f5;

	.ktv-item {
		background: #fff;
		margin: 0 20rpx 16rpx;
		padding: 30rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.08);
		display: flex;
		transition: all 0.3s ease;

		.ktv-image-wrapper {
			position: relative;
			margin-right: 24rpx;
			flex-shrink: 0;

			.ktv-image {
				width: 200rpx;
				height: 150rpx;
				border-radius: 12rpx;
			}

			.image-overlay {
				position: absolute;
				top: 8rpx;
				left: 8rpx;
				display: flex;
				flex-direction: column;
				gap: 8rpx;

				.feature-tag {
					background: linear-gradient(135deg, #fa436a 0%, #ff6b9d 100%);
					color: #fff;
					font-size: 20rpx;
					padding: 6rpx 10rpx;
					border-radius: 6rpx;
					align-self: flex-start;
					box-shadow: 0 2rpx 6rpx rgba(250, 67, 106, 0.3);
				}
			}
		}

		.ktv-info {
			flex: 1;
			display: flex;
			flex-direction: column;

			.ktv-header {
				margin-bottom: 8rpx;

				.ktv-name {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
					line-height: 1.4;
				}
			}

			.rating-row {
				margin-bottom: 8rpx;

				.rating-section {
					display: flex;
					align-items: center;

					.stars {
						display: flex;
						align-items: center;
						margin-right: 8rpx;
					}

					.rating-text {
						font-size: 24rpx;
						color: #666;
					}
				}
			}

			.price-booking-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 12rpx;

				.price-info {
					font-size: 28rpx;
					color: #fa436a;
					font-weight: 600;
				}

				.booking-status {
					font-size: 24rpx;
					color: #00c853;
				}
			}

			.ktv-details {
				display: flex;
				align-items: center;
				gap: 16rpx;
				margin-bottom: 12rpx;

				.location, .category {
					font-size: 24rpx;
					color: #666;
				}

				.distance {
					font-size: 24rpx;
					color: #999;
					margin-left: auto;
				}
			}

			.tags-section {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				gap: 12rpx;
				margin-bottom: 16rpx;

				.tag {
					font-size: 20rpx;
					padding: 6rpx 10rpx;
					border-radius: 6rpx;
					
					&.feature {
						background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
						color: #1890ff;
						border: 1rpx solid #d6f5ff;
					}
				}

				.ranking {
					font-size: 22rpx;
					color: #fa436a;
					background: linear-gradient(135deg, #fff2f0 0%, #ffe8e8 100%);
					padding: 6rpx 10rpx;
					border-radius: 6rpx;
					border: 1rpx solid #ffccc7;
				}
			}

			.promotion-section {
				margin-top: 12rpx;
				padding: 16rpx;
				background: linear-gradient(135deg, #f8f9fa 0%, #f0f8ff 100%);
				border-radius: 12rpx;
				border: 1rpx solid #e1f2ff;

				.promotion-item {
					background: #fff;
					border: 1rpx solid #fa436a;
					border-radius: 10rpx;
					padding: 16rpx;
					margin-bottom: 10rpx;
					box-shadow: 0 2rpx 8rpx rgba(250, 67, 106, 0.1);
					
					&:last-child {
						margin-bottom: 0;
					}

					.promotion-badge {
						font-size: 20rpx;
						padding: 6rpx 10rpx;
						border-radius: 6rpx;
						color: #fff;
						margin-bottom: 10rpx;
						display: inline-block;
						box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);

						&.special, &.group {
							background: linear-gradient(135deg, #fa436a 0%, #ff6b9d 100%);
						}

						&.lowest {
							background: linear-gradient(135deg, #ff9500 0%, #ffb84d 100%);
						}

						&.order {
							background: linear-gradient(135deg, #00c853 0%, #4caf50 100%);
						}

						&.festival {
							background: linear-gradient(135deg, #ff6b35 0%, #ff8a65 100%);
						}
					}

					.promotion-text {
						color: #fa436a;
						font-weight: 600;
						font-size: 28rpx;
						margin-right: 8rpx;
					}

					.promotion-price {
						color: #fa436a;
						font-size: 20rpx;
						padding: 4rpx 8rpx;
						border: 1rpx solid #fa436a;
						border-radius: 6rpx;
						margin-right: 8rpx;
						background: rgba(250, 67, 106, 0.05);
					}

					.promotion-original {
						color: #999;
						text-decoration: line-through;
						font-size: 22rpx;
						margin-right: 8rpx;
					}

					.promotion-desc {
						color: #333;
						font-size: 24rpx;
						line-height: 1.4;
						margin-top: 4rpx;
						display: block;
					}
				}
			}
		}
	}
}

// 加载更多
.load-more, .no-more {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40rpx;
	font-size: 24rpx;
	color: #999;
	background: #fff;

	.load-more {
		gap: 16rpx;
	}
}
</style>
